<link rel="stylesheet" type="text/css" href="/lib/zTree_v3/css/zTreeStyle/zTreeStyle.css">
<script type="text/javascript" src="/lib/zTree_v3/js/jquery.ztree.core.js"></script>
<script type="text/javascript" src="/lib/zTree_v3/js/jquery.ztree.excheck.js"></script>

<head>
    <style>
        .layui-layer-content {
            overflow: hidden !important;
        }

        .div1 {
            display: inline-block;
            width: 400px;
            height: 300px;
            padding: 10px;
            border: 1px solid silver;
            overflow: hidden;
            overflow-y: auto;
            vertical-align: top;
            margin-left: 10px;
        }
    </style>
</head>

<div style="margin-top: 10px;">
    <span style="font-size: small;color: gray;margin-left: 10px;"><span style="color: red;">*</span>
        可输入专题名称搜索：</span>
    <div class="layui-form-item" style="margin-left: 10px;">
        <div style="display:inline;margin-left: 10px;">
            <input type="text" id="searchZt" autocomplete="off" class="layui-input"
                style="width:340px;height: 25px;float:left;">
            <button type="submit" onclick="search()" style="width:80px;height:30px;">搜 索</button>
        </div>
    </div>
    <div class="div1">
        <ul id="tree" class="ztree"></ul>
    </div>
</div>
<script>
    search();

    //通过搜索名称生成树
    function search() {
        var ztjId = parent.chooseZtjId;
        var ztName = $("#searchZt").val();
        shared.ajaxGet('/adminTechnicalBag/queryZTJZTList', { ztjId: ztjId, ztName: ztName }, function (res) {
            if (res != "") {
                // ztree初始化 a:dom元素 b:配置对象 c:数据源
                var zTree = $.fn.zTree.init($("#tree"), setting, res),
                    treeObj = $.fn.zTree.getZTreeObj("tree");
                //展开节点
                treeObj.expandAll(true);
                //2.遍历所有节点==>checkd
                var L_deptsIDs = [],
                    ztId = "";
                if (parent.searchType == "search") {
                    ztId = $("#chooseZTId").val();
                } else {
                    ztId = $("#ztId").val();
                }
                if (ztId) {
                    L_deptsIDs.push(ztId);
                }
                //2.遍历所有节点==>checkd
                var rootNodes = treeObj.getNodes();
                var allNodes = treeObj.transformToArray(rootNodes);
                for (var index = 0; index < allNodes.length; index++) {
                    var element = allNodes[index];
                    if (L_deptsIDs.indexOf(element.id) != -1) {
                        treeObj.checkNode(element, true, true);
                    }
                }
            } else {
                layer.close(layer.index);
                alert('该专题集下暂无专题，请先建立专题！')
            }
        })
    }

    var treeObj = {};
    //ztree的配置
    var setting = {
        check: {
            enable: true,
            chkStyle: "radio"
        },
        view: {
            showIcon: false
        },
        data: {
            simpleData: {
                enable: true, //该值默认为false.若为true,原始数据不用满足嵌套格式,但需要在数据中指明 id,和pid,通过idKey和pIdKey指定
                idKey: "id",
            },
            key: {
                title: "name", //title 节点的hover值
                name: "name",//name 节点显示源数据的哪个字段
            }
        },
        callback: {
            beforeCheck: true,
            onCheck: onCheck
        }
    };

    function onCheck(e, treeId, treeNode) {
        var treeObj = $.fn.zTree.getZTreeObj("tree"),
            nodes = treeObj.getCheckedNodes(true);
        if (parent.searchType == "search") {
            if (nodes != "") {
                parent.$('#chooseZTId').val(nodes[0].id);
                parent.$('#chooseZT').val(nodes[0].name);
            } else {
                parent.$('#chooseZTId').val("");
                parent.$('#chooseZT').val("");
            }
        } else {
            if (nodes != "") {
                parent.$('#ztId').val(nodes[0].id);
                parent.$('#ztName').val(nodes[0].name);
            } else {
                parent.$('#ztId').val("");
                parent.$('#ztName').val("");
            }
        }
    };
</script>